<template>
    <div class="wrapper">
        <div class="boxWrapper tabbox">
            <el-tabs v-model="currentName">
                <el-tab-pane label="过程线" name="1">
                        <span slot="label"><i class="iconfont">&#xe7a8;</i> 过程线</span>
                </el-tab-pane>
                <el-tab-pane label="分布图" name="2">
                        <span slot="label"><i class="iconfont">&#xe603;</i> 分布图</span>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="content" v-show="currentName == '1'"> 
            <BoxWithTitle class="left-wrapper" title="目录" icon="&#xe6f2;" isOther>
                <template #other>
                    <el-button type="primary" size="mini" @click="handleAddLine()" icon="el-icon-plus">新建过程线</el-button>
                </template>
                <menuAll :CATEGROY="9" :stationId="stationId"
                 menuHeight="calc(100vh - 240px)" @getList="getTreeID" />
            </BoxWithTitle>
            <ChartLine :stationId="stationId" :treeId="treeID" :isReload.sync="isReloadChart" v-if="treeID" isSetting/>
        </div>

        <!-- 分布图 -->
        <Distribution v-if="currentName == 2" :stationId="stationId" isSetting/>

        <infoDialog :visible.sync="linesAddDialog" :linesDialogForm="linesDialogForm" @saveLineDialog="handleSaveLineDialog" name="过程线"/>
        
    </div>
</template>

<script>

import BoxWithTitle from '@/components/base/BoxWithTitle.vue'
import bus from '@/utils/eventBus.js';
import ChartLine from '@/components/page/informationAnalysis/chart.vue';
import menuAll from '@/components/page/informationAnalysis/menuAll.vue'
import Displacement from '@/components/page/informationAnalysis/Displacement.vue'
import Distribution from '@/components/page/informationAnalysis/distribution.vue'
import infoDialog from '@/components/page/informationAnalysis/infoDialog.vue'
import {linesAdd} from '@/api/https'
import { DynamicBufferAttribute } from 'three';
export default ({
    name:'chartLine',
    components:{BoxWithTitle,menuAll,ChartLine,Displacement,Distribution,infoDialog},
    data() {
        return{
            stationId:sessionStorage.getItem("stationId"),
            currentName:'1',
            treeID:'',
            isReloadChart:false,
            linesAddDialog:false,
            linesDialogForm:{},
        }
    },
    mounted(){
        this.initBasin()
    },
    deactivated(){
       bus.$off('station-changed', this.handleStationChanged);
       this.isReloadChart = false
    },
    beforeDestroy(){
       bus.$off('station-changed', this.handleStationChanged);
    },
    activated(){
        this.initBasin()
        const newStationId = sessionStorage.getItem("stationId");
        if (this.stationId != newStationId) {
           this.stationId = newStationId;
        }else{
            if(this.currentName == '1'){
                this.isReloadChart = true
            }
        }
    },
    methods:{
        initBasin() {
            bus.$emit('showBasin', true);
            bus.$off('station-changed', this.handleStationChanged);
            bus.$on('station-changed', this.handleStationChanged);
        },
        handleStationChanged(newStationId, targetRoute) {
            if (!targetRoute || targetRoute === this.$route.name) {
                this.stationId = newStationId;
            }
        },
        handlePageTitleChange(data){
            this.currentName = data.name
        },
        
        gussetMenuItem(data){
            this.timeForm = {...data.node}
            this.timeDialog = true
        },
        
        getTreeID(treeId){
            console.log(this.isReloadChart)
            if(this.treeID == treeId){
                this.isReloadChart = true
            }else{
                this.treeID = treeId
            }
        },
        handleAddLine(){
            if(this.treeID == 0 ){
                this.$message.error('请选择目录')
            }else{
                this.linesDialogForm = {
                    width:900,
                    height:300,
                    valueLen:5,
                    t_Format:1,
                    t_Part:1,
                    t_Len:365,
                }
                this.linesAddDialog = true
            }
        },
        handleSaveLineDialog(){
            const data = {...this.linesDialogForm}
            data.GraphTreeID = this.treeID
            data.StationID = this.stationId
            data.tp = 1
            linesAdd(data).then(res=>{
                if(res.isSuccess){
                    this.getTreeID(this.treeID)
                    this.linesDialogForm = {}
                    this.linesAddDialog = false
                }else{
                    this.$message.error(res.errorMessage)
                }
            })

        }
    }
})
</script>
<style lang="scss" scoped>
.wrapper{
    height: calc(100vh - 110px);
    overflow: auto;
}
.content{
   display: grid;
   grid-template-columns: 350px 1fr;
   height: calc(100vh - 180px);
    .left-wrapper{
       width: 350px;
        height: calc(100vh - 180px);
        flex-shrink: 0;
        margin-top:10px;
    }
    .right-wrapper{
        height: calc(100vh - 180px);
        overflow: auto;
        margin: 10px 0 0 10px;
        padding: 0 20px;
    }
}
.searchForm{
    padding: 10px;
    box-sizing: border-box;
}
.btn-dialog{
    display: flex;
    flex-direction: row;
    justify-content: end;
}
.menu-dialog{
    height: 400px;
    overflow: auto;
}
</style>